<template>
  <div class="home">
    <!-- 头部栏 -->
    <HomeHeader :category="category" @setCurrentCategory="setCurrentCategory"></HomeHeader>
    <!-- 轮播 -->
    <HomeSwiper></HomeSwiper>
    <!-- 列表 -->
    <HomeList></HomeList>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import HomeHeader from './home-header.vue';
import HomeSwiper from './home-swiper.vue';
import HomeList from './home-list.vue';
import { Store, useStore } from 'vuex'; // 通过createStore来拿状态
import { IGlobalState } from '@/store';
import { CATEGORY_TYPES } from '@/typings/home';
import * as Types from '@/store/actions-types';

// 写个公共的方法，处理目录
// 专门为修改分类使用的， 解决了options api
function userCategory(store: Store<IGlobalState>) {
  // 当前分类
  let category = computed(() => store.state.home.currentCategory); // 这样就拿到了vuex中的状态

  // 修改分类
  function setCurrentCategory(category: CATEGORY_TYPES) {
    store.commit(`home/${Types.SET_CATEGORY}`, category);
  }

  return {
    category,
    setCurrentCategory,
  };
}

export default defineComponent({
  // setup() {},
  components: {
    HomeHeader,
    HomeSwiper,
    HomeList,
  },

  setup() {
    // 1. 需要获取vuex中分类状态，有个更改状态的功能
    let store = useStore<IGlobalState>();
    let { category, setCurrentCategory } = userCategory(store);

    return {
      category,
      setCurrentCategory,
    };
  },
});
</script>
